<template>
  <div>
    <el-card class="el-card">
      <div>
        <el-button type="primary" @click="openDialog">新增</el-button>
      </div>
      <el-tree
        class="el-treee"
        :data="data"
        :props="defaultProps"
        node-key="id"
        :default-expanded-keys="defaultKeys"
      >
        <template #default="{ node, data }">
          <div class="content">
            <div class="left">
              <el-tag v-if="data.menu == 1">菜单</el-tag>
              <el-tag type="success" v-if="data.menu == 0">权限</el-tag>
              <el-icon class="el-icon">
                <component :is="data.icon"></component>
              </el-icon>
              {{ data.name }}
            </div>
            <div class="right">
              <el-switch
                class="el-switch"
                v-model="data.status"
                :inactive-value="0"
                :active-value="1"
                @change="switchChange(data)"
                @click.stop=""
              ></el-switch>
              <el-tooltip
                effect="dark"
                content="编辑"
                placement="top"
                :enterable="false"
              >
                <el-button
                  type="primary"
                  :icon="Edit"
                  size="small"
                  @click.stop="editRules(data)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                effect="dark"
                content="新增"
                placement="top"
                :enterable="false"
              >
                <el-button
                  type="warning"
                  :icon="Plus"
                  size="small"
                  @click.stop="addSub(data.id)"
                ></el-button
              ></el-tooltip>
              <el-tooltip
                effect="dark"
                content="删除"
                placement="top"
                :enterable="false"
              >
                <el-button
                  type="danger"
                  :icon="Delete"
                  size="small"
                  @click.stop="delRules(data)"
                ></el-button
              ></el-tooltip>
            </div>
          </div>
        </template>
      </el-tree>
    </el-card>
    <!-- 新增菜单弹框 -->
    <el-dialog v-model="dialogFormVisible" :title="titleVal" width="500">
      <el-form :model="form">
        <el-form-item label="上级菜单" :label-width="formLabelWidth">
          <el-cascader
            v-model="form.rule_id"
            :options="rulesList"
            :props="props1"
            placeholder="请选择上级菜单"
          />
        </el-form-item>
        <el-form-item label="菜单/规则" :label-width="formLabelWidth">
          <el-radio-group v-model="form.menu">
            <el-radio border :value="1">菜单</el-radio>
            <el-radio border :value="0">规则</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item
          label="菜单图标"
          :label-width="formLabelWidth"
          v-if="form.menu == 1"
        >
          <IconSelect v-model="form.icon"></IconSelect>
        </el-form-item>
        <el-form-item
          label="前端路由"
          :label-width="formLabelWidth"
          v-if="form.menu == 1 && form.rule_id > 0"
        >
          <el-input v-model="form.frontpath"></el-input>
        </el-form-item>
        <el-form-item
          label="后端规则"
          :label-width="formLabelWidth"
          v-if="form.menu == 0"
        >
          <el-input v-model="form.condition"></el-input>
        </el-form-item>
        <el-form-item
          label="请求方式"
          :label-width="formLabelWidth"
          v-if="form.menu == 0"
        >
          <el-select v-model="form.method" placeholder="请选择请求方式">
            <el-option
              v-for="item in methodData"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input-number
            v-model="form.order"
            :min="1"
            :max="1000"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addRuleOk"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Delete, Edit, Plus } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import { ElMessageBox } from "element-plus";
import {
  getRuleListFn,
  addRulesFn,
  editRulesFn,
  editStatusFn,
  delRulesFn
} from "@/api/rule.js";
import { ElMessage } from "element-plus";
import IconSelect from "@/components/IconSelect.vue";
// 树形数据源
const data = ref([]);
// 权限列表数据源
const rulesList = ref([]);
// props配置项
const defaultProps = reactive({
  children: "child",
  label: "name",
});
// 默认展开的的一级菜单节点数组
const defaultKeys = ref([]);
// 控制新增弹框显示与隐藏
const dialogFormVisible = ref(false);
const formLabelWidth = "130px";
// 弹框标题
const titleVal = ref("");
// 新增菜单数据源
const form = ref({
  rule_id: "",
  //   1表示菜单，0表示规则
  menu: 1,
  name: "",
  frontpath: "",
  condition: "",
  method: "",
  order: 50,
  status: 1,
  icon: "",
});
// 请求方式下拉列表数据
const methodData = ref([
  { id: 1, name: "GET" },
  { id: 2, name: "POST" },
  { id: 3, name: "POST" },
  { id: 4, name: "DELETE" },
]);
// 级联选择器配置对象
const props1 = reactive({
  checkStrctly: true,
  value: "id",
  label: "name",
  children: "child",
  // 直接返回id,否则会返回对象
  emitPath: false,
});
// 获取菜单权限列表
const getRulesList = async () => {
  const res = await getRuleListFn();
  console.log(res, "res");
  if (res.msg && res.msg !== "ok") return ElMessage.error(res.msg);
  // 保存数据
  data.value = res.data.list;
  rulesList.value = res.data.rules;
  // 获取一级菜单ID
  defaultKeys.value = res.data.list.map((item) => {
    return item.id;
  });
};
getRulesList();
// 新增对话框
const openDialog = () => {
  titleVal.value = "新增";
  dialogFormVisible.value = true;
};
// 新增确认
const addRuleOk = async () => {
  if (titleVal.value == "新增") {
    const res = await addRulesFn(form.value);
    if (res.msg && res.msg !== "ok") return;
    ElMessage.success("新增成功");
  } else if (titleVal.value == "编辑") {
    const res = await editRulesFn(rulesId.value, form.value);
    console.log(res, "ressss");
    if (res.msg && res.msg !== "ok") return;
    ElMessage.success("编辑成功");
  }
  dialogFormVisible.value = false;
  getRulesList();
};
const switchChange = async (row) => {
  const res = await editStatusFn(row.id, row.status);
  if (res.msg && res.msg !== "ok") {
    if (row.status == 0) {
      row.status = 1;
    } else if (row.status == 1) {
      row.status = 0;
    }
    ElMessage.error(res.msg);
    return;
  }
  ElMessage.success("状态修改成功");
};
// 编辑
const rulesId = ref("");
const editRules = (data) => {
  console.log(data, "data");
  titleVal.value = "编辑";
  form.value.rule_id = data.rule_id;
  rulesId.value = data.id;
  // 数据初始化
  form.value.menu = data.menu;
  form.value.name = data.name;
  form.value.condition = data.condition;
  form.value.method = data.method;
  form.value.status = data.status;
  form.value.order = data.order;
  form.value.icon = data.icon;
  form.value.frontpath = data.frontpath;
  dialogFormVisible.value = true;
};
// 新增
const addSub = () => {};
// 删除
const delRules =async (row) => {
    const isDel = await ElMessageBox.confirm(
    '是删除',
    '删除',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
  if(isDel == 'confirm') {
    const res = await delRulesFn(row.id)
    if(res.msg && res.msg !=='ok') return
    ElMessage.success('删除成功')
    getRulesList();
  }
};
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 20px;
  .el-tree {
    margin-top: 20px;
  }
  .content {
    width: 100%;
    display: flex;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    .left {
      width: 200px;
      display: flex;
      align-items: center;
      .el-icon {
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    .right {
      margin-left: auto;
      width: 200px;
      .el-switch {
        margin-right: 13px;
      }
    }
  }
  :deep(.el-tree-node__content) {
    height: 40px;
  }
  // .el-select {

  // }
}
</style>
